﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <title>Guardianes - Greenpeace</title>
    <script src="admin/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="admin/jquery.redirect.min.js" type="text/javascript"></script>
    <script src="admin/jquery.placeholder.min.js" type="text/javascript"></script>
    <script src="admin/jquery.base64.js" type="text/javascript"></script>

    <script src="admin/jquery.fancybox.pack.js" type="text/javascript"></script>

    <script type="text/javascript">
        var geohexcode;
        function getAuthString() {
            return "Basic " + $.base64Encode(document.getElementById("tbUsername").value + ":" + document.getElementById("tbPassword").value);
        }

        function getEncodedMail(val) {
            return $.base64Encode(val);
        }

        var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var isValidUser = false;

        function validateUser() {
            var username = $("#tbUsername").val();
            if (username == undefined || username.length < 4 || !emailRegex.test(username)) {
                $("#rError").html('Tenés que escribir una dirección de mail válida');
            }
            else {
                //1. Chequeo si existe en Earthwatchers
                $("#loadinggif").show();

                $.ajax({
                    type: "GET",
                    url: "api/earthwatchers/exists=" + getEncodedMail(username),
                    success: function (exists) {
                        if (exists) {
                            $("#tbPassword").show();
                            $("#tbPassword").focus();
                            $("#forgotPassword").show();
                            $("#loadinggif").hide();
                            $("#rError").hide();

                            $("#loginbutton").val("COMENZAR");
                        }
                        else {
                            $("#loadinggif").hide();

                            //Abro el Fancybox
                            $.fancybox.open([
                            {
                                href: '#registrationDiv',
                                minHeight: 200,
                                scrolling: 'no'
                            }]);

                            //Chequeo si ya firmó la petición
                            var parametros = {
                                "mail": username,
                                "id_ciberaccion": 5146
                            };

                            $("#loadinggif2").show();
                            $("#signDiv").hide();
                            $("#rForm").hide();

                            //TODO: sacar cuando implementemos la ciberaccion
                            /*
                            $("#loadinggif2").hide();
                            $.fancybox.update();
                            $("#rForm").show();
                            $("#rUsername").val(username);
                            $("#rCountry").val('Argentina');
                            $("#rPassword").focus();
                            $("#rError2").html("");
                            */
                            //END

                            //Descomentar cuando tengamos la nueva Ciberaccion
                            $.ajax({
                                type: "POST",
                                url: "userclient.php",
                                data: parametros,
                                success: function (data) {
                                    $("#loadinggif2").hide();
                                    var obj = JSON.parse(data);
                                    if (obj != undefined && obj.length > 0) {
                                        //Si ya firmó la petición
                                        $.fancybox.update();
                                        $("#rForm").show();
                                        $("#rUsername").val(username);
                                        $("#rCountry").val(obj);
                                        $("#rPassword").focus();
                                        $("#rError2").html("");
                                    }
                                    else {
                                        //Si no firmó la petición 
                                        $.fancybox.update();
                                        if (!$("#signDiv").is(":visible")) {
                                            $("#signDiv").show();
                                        }
                                    }
                                },
                                error: function (xhr, textStatus, errorThrown) {
                                    $("#loadinggif2").hide();
                                    $("#rError2").html(errorThrown);
                                }
                            });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $("#loadinggif2").hide();
                        $("#rError2").html(errorThrown);
                    }
                });
            }

        }

        function login() {
            //Si el password está visible entonces termino el login
            if ($("#tbPassword").is(":visible")) {
                var username = $("#tbUsername").val();
                var password = $("#tbPassword").val();
                $("#loadinggifP").show();

                $.ajax({
                    type: "GET",
                    url: "api/authenticate/login",
                    cache: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Authorization", getAuthString());
                    },
                    success: function (data) {
                        if (data) {
                            $().redirect('home.aspx', { 'username': username, 'password': password, 'geohexcode': geohexcode });
                        }
                        else {
                            $("#loadinggifP").hide();
                            $("#rError").show();
                            $("#rError").html('El usuario o la contraseña son incorrectos');
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $("#loadinggifP").hide();
                        $("#rError").show();
                        $("#rError").html('El usuario o la contraseña son incorrectos');
                    }
                });
            }
            else {
                validateUser();
            }
        }

        function register() {
            var isValid = true;
            var passwordRegex = /^.*(?=.{6,})(?=.*[a-zA-Z])(?=.*\d).*$/;
            //if (!passwordRegex.test($("#rPassword").val()))

            if ($("#rPassword").val().length < 5) {
                $("<span></span>").html("La contraseña debe tener al menos 5 caracteres.").appendTo("#rError2");
                isValid = false;
            }

            if ($("#rPassword").val() != $("#rPasswordRepeat").val()) {
                $("<span></span>").html("La segunda contraseña no coincide con la primera.").appendTo("#rError2");
                isValid = false;
            }

            if (isValid) {
                $("#loadinggif2").show();
                $.ajax({
                    url: "/api/earthwatchers",
                    type: "POST",
                    data: "{\"Name\":\"" + $("#rUsername").val() +
                        "\",\"Role\":\"" + 0 +
                        "\",\"Password\":\"" + $("#rPassword").val() +
                        "\",\"Country\":\"" + $("#rCountry").val() +
                        "\",\"Language\":\"" + "Spanish" +
                        "\", \"Basecamp\":\"" + "Argentina" + "\" }",
                    contentType: "application/json ; charset=utf-8",
                    dataType: "json",
                    success: function (result) {
                        $().redirect('home.aspx', { 'username': $("#rUsername").val(), 'password': $("#rPassword").val(), 'geohexcode': geohexcode });
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $("<span></span>").html(errorThrown + " - " + textStatus).appendTo("#rError2");
                        $("#loadinggif2").hide();
                    }
                });
            }
        }

        (function ($) {
            $.QueryString = (function (a) {
                if (a == "") return {};
                var b = {};
                for (var i = 0; i < a.length; ++i) {
                    var p = a[i].split('=');
                    if (p.length != 2) continue;
                    b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
                }
                return b;
            })(window.location.search.substr(1).split('&'))
        })(jQuery);

        $(function () {
            geohexcode = $.QueryString["geohexcode"];

            $('input, textarea').placeholder();

            $("#signButton").click(function () {
                $().redirect("http://www.greenpeace.org.ar/nodesmontes/index.php?referrer=guardianes&cyberaccion=5146&mail=" + $("#tbUsername").val(), { 'email': $("#tbUsername").val(), 'source': 'guardianes' });
            });

            $("#registerButton").click(function () {
                register();
            });

            $("#forgotPassowrdButton").click(function () {
                $("#loadinggifP").show();
                $.ajax({
                    url: "/api/earthwatchers/forgotPassword",
                    type: "POST",
                    data: "{\"Name\":\"" + $("#tbUsername").val() + "\" }",
                    contentType: "application/json ; charset=utf-8",
                    success: function () {
                        $("#loadinggifP").hide();
                        //Abrir fancy box para avisar que se mandó la nueva contraseña por mail
                        $.fancybox.open([
                            {
                                href: '#forgotPassowrdDiv',
                                scrolling: 'no'
                            }]);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $("#loadinggifP").hide();
                        $("#rError").show();
                        $("<span></span>").html(errorThrown + " - " + textStatus).appendTo("#rError");
                    }
                });
            });

            $("#rPasswordRepeat").keypress(function (event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
                    register();
                }
            });

            $("#tbPassword").keypress(function (event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
                    login();
                }
            });

            $("#loginbutton").click(function () {
                login();
            });

            $("#videoButton").click(function () {
                $.fancybox.open([
                            {
                                href: '#videoDiv',
                                scrolling: 'no'
                            }]);
            });

            $("#tbUsername").keypress(function (event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == '13') {
                    validateUser();
                }
            });

            $("#tbUsername").focusout(function () {
                validateUser();
            });

            //Obtengo de donde viene y el mail
            var referrer = document.referrer;
            if (referrer != undefined && referrer.indexOf('greenpeace.org.ar') > -1) {
                //var r = referrer.indexOf("&referrer=&mail=") + 15;
                //var mail = referrer.substring(r, referrer.length);
                var mail = $.QueryString["mail"];
                if (mail != undefined && mail != '') {
                    $("#tbUsername").val(mail);
                    validateUser();
                }
            }

            $().redirect('home.aspx', { 'username': 'lgorganchian@gmail.com', 'password': 'test1234' });
        });
    </script>
    <link href="css/ew.css" rel="stylesheet" />

    <link href="css/jquery.fancybox.css" rel="stylesheet" />
</head>
<body>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-47414806-1', 'greenpeace.org.ar');
        ga('send', 'pageview');

    </script>
    <div class="floater">
        <div class="contents">
            <div>
                <img src="Images/logo.png" />
            </div>
            <div style="margin-top: 15px">
                <img src="Images/guardianes.png" />
            </div>
            <div class="container">
                <div id="logindiv">
                    <div style="float: left">
                        <div class="content">
                            <div>
                                <a href="#" title="Click aquí para ver el video" id="videoButton">
                                    <img src="Images/video2.jpg" style="padding: 15px" alt="Ver video" title="Ver video" border="0" />
                                </a>
                            </div>
                        </div>
                    </div>
                    <div style="float: right">
                        <form name="loginform" id="loginform" class="login-form">
                            <div class="content">
                                <div class="headertxt">
                                    Ingresá tu dirección de mail para<br />
                                    comenzar a cuidar el bosque!
                                </div>

                                <input name="tbUsername" id="tbUsername" type="text" class="input" placeholder="dirección de mail" title="Escriba su dirección de mail">

                                <img id="loadinggif" src="css/fancybox_loading.gif" style="display: none; float: right; margin-top: 20px" />

                                <input name="tbPassword" type="password" id="tbPassword" class="input" placeholder="contraseña" style="display: none">

                                <img id="loadinggifP" src="css/fancybox_loading.gif" style="display: none; float: right; margin-top: 20px" />

                                <div class="slink" style="display: none" id="forgotPassword">
                                    <a href="#" id="forgotPassowrdButton" title="Se te enviará una nueva contraseña por mail">Olvidaste tu contraseña?</a>
                                </div>
                                <input type="button" value="SIGUIENTE >>" id="loginbutton" class="button" />

                                <div id="rError" class="error">
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="registrationDiv" style="display: none; width: 500px;">
        <img id="loadinggif2" src="css/fancybox_loading.gif" style="margin: auto" />

        <div id="signDiv" style="display: none" class="login-form">
            <div class="content">
                <h3>Para ser un Guardián te invitamos a firmar la petición para salvar a los bosques de Salta</h3>
                <input type="button" value="FIRMAR" id="signButton" class="button" />
            </div>
        </div>

        <form name="rForm" id="rForm" class="login-form" style="display: none">
            <div class="content">
                <b>Este es tu nombre de usuario!</b>

                <input name="rUsername" id="rUsername" type="text" class="input" disabled="disabled">
                
                <div style="clear:both;"><br /><b>Te pedimos que elijas una contraseña para continuar!</b></div>
                <input name="rPassword" type="password" id="rPassword" class="input" placeholder="contraseña">
                <input name="rPasswordRepeat" id="rPasswordRepeat" title="Repetí tu contraseña" type="password" class="input" placeholder="repetir contraseña">

                <input name="rCountry" id="rCountry" type="hidden" class="input">
                <input type="button" value="COMENZAR" id="registerButton" class="button" />
            </div>
        </form>

        <div id="rError2" class="error"></div>
    </div>
    <div id="videoDiv" style="display: none; width: 730px;">
        <iframe id="ytplayer" width="720" height="405" src="//www.youtube.com/embed/8bbWsh3ssyk" frameborder="0" allowfullscreen></iframe>
    </div>

    <div id="forgotPassowrdDiv" style="display: none; width: 500px;">
        <img src="Images/check-icon.png" alt="Ok" />
        Te hemos enviado un email.
        <br />
        <br />
        Lo vas a recibir en pocos minutos. Seguí las instrucciones indicadas en el mail para resetear tu contraseña.
        <br />
        <br />
        Si no recibiste el mail, chequeá las carpetas de correo no deseado. Asegurate que los filtros de tu mail acepten mails desde greenpeace.org
        <br />
        <br />
        Muchas Gracias.
    </div>
</body>
</html>
